<template>
	<div class="wrap">
		<header-v></header-v>
		<section class="container">
			<div class="banner_2" v-for="item in banner">
				<img :src="item.src" alt="" />
				<p ref='a'>{{ item.desc }}</p>
			</div>
			<div class="content">
				<nav-v></nav-v>
				<consult-v></consult-v>
				<div class="ask">
					<div class="title"><p>诚聘英才</p><em></em></div>
					<div class="con">
						<p v-for="item in askTxt">{{ item }}</p>
					</div>
				</div>
				<div class="zp">
					<div v-for="item in zp">
						<img :src="item.src" alt="" />
						<p>{{ item.title }}</p>
						<p>{{ item.desc }}</p>
					</div>
				</div>
				<div class="form" :style="form_bg">
					<div class="shade">
						<div>
							<strong>提交应聘信息</strong>
							<p>请填写好你的应聘信息，点击提交按钮提交信息，我们将在最快时间给您回复。<br /> 或者直接致电咨询 <span>+86 - 18810713166</span> </p>
						</div>
						<form action="/" @submit.prevent="submit" method="post">
	  						<group>
						    	<x-input ref="info_1" :show-clear="false" required placeholder="姓名"></x-input>
						  	</group>
						  	<group>
						   		<x-input ref="info_2" :show-clear="false" :type="'number'" is-type="china-mobile" required placeholder="电话"></x-input>
						  	</group>
						    <group>
						   		<selector placeholder="请选择职业" v-model="selects" :options="list"></selector>
						    </group>
						  	<group>
						    	<x-textarea ref="info_3" :show-clear="false" autosize :max="280" placeholder="工作经历"></x-textarea>
						  	</group>
						  	<x-button type="submit">提交</x-button>
						</form>
						
						<div v-transfer-dom>	
							<x-dialog v-model="bool" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
						        <p style="color:#fff;text-align:center;" @click="bool = false">
						          	<span style="font-size:0.25rem;">恭喜您!提交成功!</span>
						          	<br>
						          	<br>
						          	<x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
						        </p>
					      </x-dialog>
					    </div>
					    
					    <div v-transfer-dom>	
							<x-dialog v-model="bool2" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
						        <p style="color:#fff;text-align:center;" @click="bool2 = false">
						          	<span style="font-size:0.25rem;">对不起!您的输入有误!</span>
						          	<br>
						          	<br>
						          	<x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
						        </p>
					      	</x-dialog>
					    </div>
						
					</div>
				</div>
			</div>
		</section>
		<footer-v></footer-v>
	</div> 
</template>


<script>
import header from '../public/header'
import footer from '../public/footer'
import consult from '../public/consult'
import nav from '../public/nav'
import towBanner from '../../assets/towBanner.jpg'
import zp from '../../assets/zp.jpg'
import form_bg from '../../assets/form_bg.jpg'

import {XInput, Group, XTextarea, XButton, Selector, XDialog, TransferDomDirective as TransferDom} from 'vux'
export default {
	
  components: {
  	headerV : header,
  	footerV : footer,
  	consultV : consult,
  	navV : nav, XInput, Group, XTextarea, XButton, XDialog, Selector
  },
  directives: {
    TransferDom
  },
  data () {
    return {
    	banner : [
    		{src : towBanner,desc : '—— 打造时尚有品位的家居生活和人文环境。'}
    	],
    	form_bg : "background:url('"+ form_bg +"')  center center no-repeat",
    	askTxt : [
    		'如果您能达到以下四点均可加入',
    		'1、懂绘画设计，有良好的绘画基础，能独立完成常规难度的壁画绘制，有墙绘3年以上经验。',
    		'2、有很强的责任心，工作努力认真。有较好的理解、沟通能力并可以在规定时间内保质保量完成绘制 。 ',
    		'3、熟练使用丙烯、能掌握素描、水粉、油画等绘画材料。 ',
    	],
    	zp : [
    		{
    			src : zp,
    			title : '墙绘图案设计师',
    			desc : '负责某某墙绘图案的设计出图负责某某墙绘图案的设计出图负责某某墙绘图案的设计出图负责某某墙绘图案的设计出图'
    		},
    		{
    			src : zp,
    			title : '墙绘现场绘制师',
    			desc : '负责某某墙绘现场绘制负责某某墙绘现场绘制负责某某墙绘现场绘制负责某某墙绘现场绘制负责某某墙绘现场绘制负责某某墙绘现场绘制'
    		},
    		{
    			src : zp,
    			title : '了解艺术业务员',
    			desc : '负责某某墙绘现场绘制负责某某墙绘现场绘制负责某某墙绘现场绘制负责某某墙绘现场绘制负责某某墙绘现场绘制负责某某墙绘现场绘制'
    		},
    	],
    	list: [
	    	{key: 'tuan', value: '墙绘图案设计师'}, 
	    	{key: 'xianchang', value: '墙绘现场绘制师'},
	    	{key: 'yishu', value: '了解艺术业务员'}
	    ],
    	bool : false, bool2 : false, selects : ''
    }
  },
  methods : {
  	
  	submit : function (event){
  		
  		//找到input 判断是否为空~
  		var info = this.$refs.info_1.$el.getElementsByClassName('weui-input')[0];
  		var info2 = this.$refs.info_2.$el.getElementsByClassName('weui-input')[0];
  		var info3 = this.$refs.info_3.$el.getElementsByClassName('weui-textarea')[0];	
  		
  		if(this.$refs.info_1.$el.className == 'vux-x-input weui-cell' && this.$refs.info_2.$el.className == 'vux-x-input weui-cell' && this.$refs.info_3.$el.className == 'weui-cell vux-x-textarea' && info.value != '' && info2.value != '' && info3.value != ''){
  			
  			this.bool = !this.bool;
  		
  		}else{
  			
  			this.bool2 = !this.bool2;
  			
  		}
  	}
  },
  mounted () {
  	setTimeout(()=>{	
  		this.$refs.a[0].style.right="0"
  	},300)
  }
}

</script>

<style type="text/css" scoped>
	/* recruit.style */

	.content .title{
		width:55% !important; margin: 0 auto; position: relative; border-bottom: 0.02rem solid #ccc;  margin-bottom: 0.3rem;  padding-top: 0.2rem;
	}
	.content .title p{
		font-size: 0.24rem; width: 60%; margin: 0 auto; text-align: center; line-height: 0.7rem;
	}
	.content .title em{
		width: 40%; height: 0.02rem; background: #F54F36; position: absolute; left: 30%;
	}
	
	.ask .con{
		padding:0 0.25rem 0.35rem 0.25rem; color:#696969; line-height: 0.22rem;
	}
	.ask .con p:nth-of-type(1){
		font-weight: bold; line-height: 0.25rem;
	}

	.zp {
		background: #f7f7f7; padding: 0.7rem 0.3rem 0.01rem 0.3rem;
	}
	.zp div{
		border: 0.01rem solid #b0b0b0; background: #fff; padding: 0 0.1rem; border-radius: 0.05rem; text-align: center; height: 1.75rem; margin-bottom: 0.7rem;
	}
	.zp div img{
		margin-top: -0.4rem; width:0.71rem; height: 0.74rem;
	}	
	.zp div p:nth-of-type(1){
		font-size: 0.16rem; line-height: 0.35rem
	}
	.zp div p:nth-of-type(2){
		color: #696969; line-height: 0.22rem;
	}
	
	.form{
		width: 100%; height: 5.6rem; background-size:100% 5.8rem !important; overflow: hidden; padding-bottom: 0.2rem;
	}
	.form .shade {
		border: 0.01rem solid rgb(220, 220, 220); border-radius: 0.03rem; padding: 0.15rem; background: rgba(255,255,255,0.74); width: 76%; margin: 0 auto; height: 4.6rem; margin-top: 0.4rem;
	}
	.form .shade div{
		text-align: center;
	}
	.form .shade strong{
		color: #0093dd; font-size: 0.2rem; line-height: 0.35rem;
	}
	.form .shade p{
		line-height: 0.22rem;
	}
	.form .shade p span{
		color: #0093dd;
	}
	.form .shade form {
		margin-top: 0.2rem;
	}
</style>
<style type="text/css">
	.banner_2{
		position: relative;
	}
	.banner_2 img{
		width: 100%; height: 0.9rem;
	}
	.banner_2 p{
		color: #fff; position: absolute; top: 0.6rem; right: -22rem; -webkit-transition: 0.2s; transition: 0.5s;
	}
	
	
	.shade .weui-cell__bd input,textarea,select{
		border: 0.01rem solid #dcdcdc; margin-bottom: 0.12rem; color: #666 !important; text-indent: 1em; border-radius: 0.04rem; font-size: 0.14rem !important; width: 99%; height: 0.4rem !important; background: #fff !important;
	}
	.shade button{
		width: 1.34rem !important; height: 0.4rem; margin-top: 0.1rem; background: #0093dd; color: #fff; border-radius: 0.3rem; font-size: 0.14rem;
	}
	.shade textarea{
		height: 1rem !important; padding-top:0.1rem; width: 99%;border: 0.01rem solid #dcdcdc;
	}	
	.shade select{
		text-indent: 0; height: 0.45rem !important;
	}
	.form form .weui-cells,.weui-cells:after,.weui-cells:before{
		background: none !important; border: none !important; 
	}
	.form .weui-textarea-counter{
		height: 0 !important;
	}
	.form .weui-cells{
		margin:0 auto !important;
	}
	.form .weui-cell{
		 padding: 0 !important; overflow: auto !important;
	}
	.form .vux-input-icon{
		width: 0.3rem; height: 0.21rem; line-height: 0.1rem;
	}
	.vux-input-icon.weui-icon-warn:before, .vux-input-icon.weui-icon-success:before{
		font-size: 0.21rem !important;
	}
</style>
